<!--
 * @Author: xurenda <xurenda@qq.com>
 * @HomePage: https://xurenda.top
 * @Github: https://github.com/xurenda
 * @Date: 2019-10-12 12:18:14
 * @LastEditTime: 2019-11-15 16:22:20
 * @FilePath: \elegant-surf\src\components\home\ModalBox.vue
 -->
<!-- 弹出模态框 -->
<template>
<div id="modal-box">
  <header class="modal-header">
    <router-link
      v-for="nav in modalBoxNav"
      :key="nav.routerLink"
      :to="nav.routerLink"
      class="link"
      tag="div"
    >
      <i class="iconfont" :class="nav.iconfontName"></i>
      <span>{{ nav.label }}</span>
    </router-link>
  </header>
  <div class="main">
    <router-view></router-view>
  </div>
</div>
</template>

<script>
import { modalBoxNav } from '@/assets/js/data'

export default {
  data() {
    return {
      modalBoxNav
    }
  }
}
</script>

<style lang="stylus">
#modal-box
  width calc(100vw - 50px)
  height calc(100vh - 50px)
  min-width 800px
  position fixed
  top 25px
  left 25px
  opacity 0
  background #fafafa
  transition transform .3s, opacity 1s
  transform translateY(-150%)
  will-change transform
  z-index 100
  &.show
    transform translateY(0)
    opacity 1
  .modal-header
    display flex
    align-items center
    height 60px
    padding 20px 40px
    box-sizing border-box
    border-bottom 1px solid #ececec
    > div
      margin-right 50px
      color #666
      &:hover
        color #000
      i.iconfont
        margin-right 6px
      span
        font-size 12px
  .main
    height calc(100% - 60px)
    overflow auto
    > div
      height 100%
</style>